const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack');
const resolvePath = require('./paths');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { merge } = require('webpack-merge')
const prodConfig = require('./webpack.prod')
const devConfig = require('./webpack.dev')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const conmonConfig = {
    entry: './src/index.js',
    output: {
        filename: 'js/[name].boundle.js',
        path: resolvePath('./build')
    },
    resolve: {
        //  按顺序自动解析文件类型，我们可以在import文件后不加文件的后缀名
        extensions: ['.js', '.json', '.ts', '.jsx', '.vue'],
        //  相对路径查找起来麻烦，可以设置别名来简化路径
        alias: {
            '@': resolvePath('./src')
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            esModule: false
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('postcss-preset-env')
                                ]
                            }
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|svg|gif|jpe?g)$/,
                type: 'asset',
                generator: {
                    filename: 'images/[name].[hash:8].[ext]'
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 50 * 1024
                    }
                }
            },
            {
                test: /\.(ttf|woff2?|eot)$/,
                type: 'asset',
                generator: {
                    filename: 'font/[name].[hash:8].[ext]'
                }
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            },
            {
                test: /\.ts$/,
                use: ['babel-loader']
            },
            // {
            //     test: /\.(png|svg|gif|jpe?g)$/,
            //     type: 'asset/inline',
            // }
            // {
            //     test: /\.(png|svg|gif|jpe?g)$/,
            //     type: 'asset/resource',
            //     generator: {
            //         filename: 'images/[name].[hash:8].[ext]'
            //     }

            // }
            // {
            //     test: /\.(png|svg|gif|jpe?g)$/,
            //     use: [
            //         {
            //             loader: 'url-loader',
            //             options: {
            //                 name: 'images/[name].[hash:6].[ext]',
            //                 limit: 25 * 1024
            //             }
            //         }
            //     ]
            // }
            // {
            //     test: /\.(png|svg|gif|jpe?g)$/,
            //     use: [
            //         {
            //             loader: 'file-loader',
            //             options: {
            //                 name: 'images/[name].[hash:6].[ext]'
            //             }
            //         }
            //     ]
            // }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'wenpack基础知识学习',
            template: './public/index.html'
        }),
        new DefinePlugin({
            BASE_NAME: '"我是全局变量"',
            BASE_URL: '"./"'
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ],
    performance: {
        hints: false
    }
}

module.exports = (env) => {
    const isProduction = env.production;
    process.env.NODE_ENV = isProduction ? 'production' : 'development';
    const config = merge(conmonConfig, isProduction ? prodConfig : devConfig);
    return config
}